﻿@model Crucible.Models.Node


<div id="argumentResizeWrap">
    <div id="argumentContainer">
        <div id="argumentDiv">
            <div data-bind="foreach: visibleNodes">
                <div data-bind="attr: { id: elementId }, css: NodeCss">
                    <div class="altParents" data-bind="foreach: OtherParents">
                        <div data-bind="click: $root.reRoot" class="altParent">
                            <div class="ui-icon ui-icon-seek-prev"></div>
                            <div class="parentTip">
                                <p><span>Show parent: </span><span data-bind="text: Title"></span></p>
                            </div>
                        </div>
                    </div>
                    <div class="colorBox"><div class="colorStripe"></div></div>
                    <div class="assertionWrap">
                        <a data-bind="text: Action, click: $parent.focusNode" class="nodeAction"></a>
                        <span data-bind="text: Title()" class="assertionTitle"></span>
                        <p data-bind="visible: !IsEditing() && Body(), html: FormattedBody()" class="assertionContent"></p>
                        <p class="wmd-holder"></p>
                    </div>
                </div>
            </div>
            <canvas id="argumentCanvas"></canvas>
        </div>
    </div>
</div>


<div id="argumentContext" data-bind="with: surrogateNode">
    <div id="assertionTitle" class="titlebox">
        <span data-bind="text: Title">@Html.DisplayFor(model => model.Title)</span>
    </div>

    <div style="clear: both"></div>


    <div id="argumentEditor" data-bind="fadeVisible: IsEditing()">
        <div id="form-wrapper">

            <h2 id="create-label">Create <span data-bind="text: crucible.NodeTypeName(Type())"></span></h2>

            <div>

                <div class="editor-field">
                    <input data-bind="value: Title, valueUpdate: 'keyup'" type="text" id="Title" name="Title" placeholder="Title" />
                </div>
                <div class="editor-field">
                    <input type="text" placeholder="Link" data-bind="value: Link, fadeVisible: !Link() && (Type() == crucible.NodeType.source || Type() == crucible.NodeType.originator)" />
                </div>
                <div class="editor-field">
                    <a data-bind="text: Link(), attr: { href: Link() }, fadeVisible: Link() && (Type() == crucible.NodeType.source || Type() == crucible.NodeType.originator)"></a>
                </div>
                <div id="sourceTag" data-bind="with: Source">
                    <span id="sourceTitle" data-bind="text: Title"></span><a data-bind="click: $root.clearSource.bind($root, $parent)"><span class="ui-icon ui-icon-circle-close"></span></a>
                </div>
                
                <div>
                    @*<button data-bind="click: $parent.setSource, visible: !Source() && Type() == crucible.NodeType.source">Set originator</button>*@
                    <a data-bind="click: $parent.setSource, visible: ShowSourceBtn, text: Type() == crucible.NodeType.source ? 'Set originator' : 'Set source'"></a>
                    <input type="text" id="Source" />
                </div>
                @*<div class="editor-field">
                    <input data-bind="fadeVisible: Type() == crucible.NodeType.interpretation || Type() == crucible.NodeType.source" type="text" id="Source" name="Source" placeholder="Source" style="width: 500px; margin-top: 10px; display: none" />
                </div>*@

                <div data-bind="fadeVisible: Type() == crucible.NodeType.assertion || Type() == crucible.NodeType.interpretation" class="editor-field">
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    <div id="wmd-button-bar">
                                        <span class="wmd-button-lookalike" data-bind="click: $parent.addRoot, visible: Type() == crucible.NodeType.assertion || !Source()">Add root</span>
                                        @*<span class="wmd-button-lookalike" data-bind="click: $parent.setSource, visible: !Source() && (Type() == crucible.NodeType.interpretation || !BodyHasChildren())">Set source</span>*@
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <textarea data-bind="value: Body, valueUpdate: 'keyup'" rows="8" name="Body" id="wmd-input"></textarea>
                                </td>
                                <td style="vertical-align: top">
                                    <input type="text" id="quick" />
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>


            </div>

            <p>
                <a data-bind="click: $parent.publish" id="publish" class="bevelCorner">Publish</a>
                <a data-bind="click: $parent.saveDraft" id="draft" class="bevelCorner">Save Draft</a>
            </p>

        </div>

        <div id="hiddenDiv" style="display: none">
            <div id="wmd-preview"></div>
            <span id="title-preview"></span>
        </div>
    </div>

    <div data-bind="fadeVisible: !IsEditing()" id="argumentView" style="margin-left: 15px">

        <div id="assertionAuthor">
            <span>Created by </span>
            <span data-bind="text: AddedBy().UserName"></span>

        </div>
        
        <a data-bind="click: agreeUp">Agr up</a>
        <a data-bind="click: agreeDown">Agr down</a>
        <span data-bind="text: Agreement"></span>
        
        <a data-bind="click: logicUp">Log up</a>
        <a data-bind="click: logicDown">Log down</a>
        <span data-bind="text: Logic"></span>

        <a data-bind="text: Link(), attr: { href: Link() }, visible: Link() && (Type() == crucible.NodeType.source || Type() == crucible.NodeType.originator)"></a>


        <div id="nodeBody" data-bind="visible: Body() && ( Type() == crucible.NodeType.assertion || Type() == crucible.NodeType.interpretation ),
                        html: FormattedBody()"></div>

        
        <script type="text/html" id="comment-template">
            @*<div class="commentUpvote">
                <button>Up</button>
            </div>
            <div class="commentScore">
                <span data-bind="text: Score"></span>
            </div>*@
            <div class="commentWrapper">
                <div data-bind="html: FormattedBody, visible: !IsEditing()" class="commentBody"></div>
                <div>
                    <textarea rows="2" data-bind="value: BodyEdit, visible: IsEditing, hasfocus: EditHasFocus"></textarea>
                    <div class="commentEditControls">
                        <a data-bind="click: cancelEdit, visible: IsEditing">Cancel</a>
                        <a data-bind="click: saveEdit, visible: IsEditing">Save</a>
                    </div>
                </div>
            </div>
            <div data-bind="visible: !IsDeleted && crucible.userId === Author.UserId && !IsEditing()" class="commentControls">
                <a class="commentEdit" data-bind="click: startEditing">Edit</a>
                <a data-bind="click: startDeleting">Delete</a>
            </div>
            <div data-bind="text: Date, visible: !IsEditing()" class="commentDate"></div>
            <div data-bind="text: Author.UserName, visible: !IsEditing()" class="commentAuthor"></div>
            <div style="clear:both"></div>
            
            <div id="details" data-bind="jqDialog: { title: 'Are you sure?', minHeight: 50, autoOpen: false, resizable: false, modal: true, beforeClose: function () { IsDeleting(false); } }, openDialog: IsDeleting"> 
                <input data-bind="click: $root.deleteComment" type="button" value="Delete comment" />
                <input data-bind="click: function () { IsDeleting(false); }" type="button" value="Cancel" />
            </div>
        </script>

        <div data-bind="foreach: Comments" id="commentSection">
            <div class="comment" data-bind="template: { name: 'comment-template' }"></div>
            
            <div class="commentReplyBlock">
                <div data-bind="foreach: Replies">
                    <div class="comment" data-bind="template: { name: 'comment-template' }"></div>
                </div>
                <a data-bind="click: startReplying, visible: !ReplyBoxVisible()">Add reply</a>
                <div data-bind="visible: ReplyBoxVisible">
                    <textarea class="replyBox" data-bind="value: newReply, hasfocus: ReplyBoxFocused" rows="2"></textarea><br />
                    <a data-bind="click: $root.saveComment.bind($root, $parent, $data)" class="bevelCorner">Submit</a>
                    <a data-bind="click: function () { ReplyBoxVisible(false); }">Cancel</a>
                </div>
            </div>
        </div>
        <a data-bind="click: startCommenting, visible: !CommentBoxVisible()">Add comment</a>
        <div data-bind="visible: CommentBoxVisible">
            <textarea data-bind="value: newComment, hasfocus: CommentBoxFocused" rows="3"></textarea><br />
            <a data-bind="click: $root.saveComment.bind($root, $data, null)" class="bevelCorner">Submit</a>
            <a data-bind="click: function (data) { data.CommentBoxVisible(false); }">Cancel</a>
        </div>
    </div>
</div>


